<template>
	<div class="card" @click.stop="jump">
		<div class="img">
			<image :src="item.IMAGE" mode="widthFix" class="img-inner"></image>
		</div>
		<div class="right">
			<div class="name single-line">{{ item.NAME}}</div>
			<div class="desc multi-line-3">{{ item.DETAIL }}</div>
		</div>
	</div>
</template>
<script>
	import { execFn } from '@/utils'
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			jump() {
				this.item.URL && (execFn(this.item.URL))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		height: 292rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
		margin: 0 20rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.img {
		width: 240rpx;
		height: 240rpx;
		overflow: hidden;
		border-radius: 10rpx;
		flex-shrink: 0;
		padding-left: 26rpx;
		&-inner {
			width: 100%;
		}
	}

	.right {
		box-sizing: border-box;
		padding: 26rpx;
		flex: auto;
		overflow: hidden;
	}

	.name {
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.single-line {
		overflow: hidden;
		/* 隐藏溢出内容 */
		white-space: nowrap;
		/* 禁止换行 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}


	.desc {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}
	
	.multi-line-3 {
		overflow: hidden;
		-webkit-line-clamp: 3;
		/* 限制显示行数 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		
		-webkit-box-orient: vertical;
		display: -webkit-box; 
	}
</style>